var arr = [
    { id: 1, name: '张三', sex: '男', age: 18, city: '北京' },

]

var oTbody = document.querySelector('tbody');
var oTable = document.querySelector('table');

//获取新增标签对象
var oDivAdd = document.querySelector('.add');
var oAddName = oDivAdd.querySelector('[name = "name"]');
var oAddSexAll = oDivAdd.querySelectorAll('[name = "sex"]');
var oAddAge = oDivAdd.querySelector('[name = "age"]');
var oAddCity = oDivAdd.querySelector('[name = "city"]');
console.log(oAddCity)

//获取button标签
var oAddBut = oDivAdd.querySelector('button');

//获取修改标签对象
var oDivChange = document.querySelector('.change');
var oChangeName = oDivChange.querySelector('[name = "name"]');
var oChangeSexAll = oDivChange.querySelectorAll('[name = "sex"]');
var oChangeAge = oDivChange.querySelector('[name = "age"]');
var oChangeCity = oDivChange.querySelector('[name = "city"]');
var oChangeOption = oDivChange.querySelector('option');

//获取button标签
var oChangeButTrue = oDivChange.querySelector('[name = "true"]');
var oChangeButFalse = oDivChange.querySelector('[name = "false"]');




setPage();



function setPage() {
    if (arr.length === 0) {
        oTbody.innerHTML = '<tr><td colspan = "7">没有匹配的数据</td></tr>';
    } else {
        let str = '';

        arr.forEach(function (item, key) {
            str += `
        <tr>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.sex}</td>
        <td>${item.age}</td>
        <td>${item.city}</td>
        <td><button name = "del" index = "${key}">删除</button></td>
        <td><button name = "change" index = "${key}">修改</button></td>
        
    </tr>     `   
        })
        oTbody.innerHTML = str;
    }
   
}




oTbody.addEventListener('click', function (event) {
    if (event.target.getAttribute('name') === 'del') {
        if (!window.confirm('你确定要删除吗')) return;

        arr.splice(Number(event.target.getAttribute('index')), 1);
        setPage();
        
    }else if(event.target.getAttribute('name') === 'change'){

    var obj = arr[Number(event.target.getAttribute('index'))];
      
    oChangeButTrue.setAttribute('index', Number(event.target.getAttribute('index')));

    oChangeName.value = obj.name;
    oChangeAge.value = obj.age;

    for(let i = 0 ; i < oChangeSexAll.length ; i++){
        if(oChangeSexAll[i].value === obj.sex){
            oChangeSexAll[i].checked = true;
            break;
        }
    }

    for(let i = 0 ; i < oChangeOption.length ; i++){
        if(arr[Number(oChangeOption[i].value)] === obj.city){
            oChangeOption[i].selected = true;
            break;
        }
    }


}
})





oAddBut.addEventListener('click' , function(){
    if(!window.confirm('你确定要添加吗？')) return;


    var name = oAddName.value;
    var age = oAddAge.value;
    var city = oChangeCity.value;
    var sex = '';


    for(var i = 0 ; i < oAddSexAll.length; i++){
        if(oAddSexAll[i].checked){
            sex = oAddSexAll[i].value;
            break;
        }
    }

    var obj = {id : arr[arr.length - 1].id + 1 , name :name , age : age , sex:sex , city:city};
    arr.push(obj);

    setPage();
})








oChangeButTrue.addEventListener('click' , function(){
    if(!window.confirm('你确定要修改吗')) return;

    var obj = arr[Number(this.getAttribute('index'))];

    obj.name = oChangeName.value;
    obj.age  = oChangeAge.value;
    obj.city = oChangeCity.value;

    for(var i = 0 ; i < oChangeSexAll.length; i++){
        if(oChangeSexAll[i].checked){
            obj.sex = oChangeSexAll[i].value;
            break;
        }
    }

    setPage();

   
})



